<template>
  <div class="container">
       <h3>vuex------------ {{this.$store.state.num}}</h3>
    <input type="text" v-model="inp"> -----{{inp}}
    <br/>
   <span ref="abc">{{str}}</span> 
  </div>
</template>

<script>
export default {
  data() {
    return {
      str:'啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊',
      inp:'',
    }
  },
 methods:{
 
 },
  beforeCreate(){
    console.log(222222222222)
  },
  // created操作数据，eg:data/methods
  created(){
    // 若想在created中操作dom,那么延迟操作，就等同于mounted eg:
    this.$nextTick(()=>{
      console.log(this.$refs.abc)
        this.$refs.abc.style.fontSize="30px"
    })
    console.log(3333333333)
  },
  beforeMount(){
  
    console.log(44444444)
  },
  // mounted 操作dom ,页面渲染完成之后执行
  //1>eg:改变某个标签的样式，要在dom渲染完成之后才会改变，所以在mounted写
  //2>eg:若有一个子组件也写了生命周期，console.log的顺序怎么执行？
  //-------》这个子组件在父组件中相当于一个dom，而dom是在mounted（）中执行的，所以前面的生命周期钩子不受影响，（1，2，3 ，4， 7，8，9 ，5  ）在mounted（）中先执行完毕子组件中所有的生命周期钩子，再执行父组件中的mounted 和之后的生命周期钩子
  mounted(){
    this.$refs.abc.style.color="red"
    console.log(555555555555)
  },
  beforeUpdate(){
   
    console.log(77777777)
  },
  updated(){
     
    console.log(888888)
  },
  // beforeDestroy(){
  //   console.log(99999999999999)
  // },
  // destroyed(){
  //   console.log(101010)
  // },
  components: {

  },
  

}
</script>

<style scoped>

</style>
